<script setup lang="ts">
import { reactive, ref, onMounted, onActivated } from "vue"
import { decryptJasypt } from '@@/utils/crypto-utils';
import type { FormInstance, FormRules } from 'element-plus'
import { addUser, updateUser, getUser } from '@/common/apis/system/user'
import { ElMessage } from "element-plus"
import { useRoute, useRouter } from "vue-router"
import { closeRoute } from "@/common/composables/useCloseRouteListener"

defineOptions({
  // 命名当前组件
  name: "SystemUserCreate"
})
const route = useRoute()
const router = useRouter()
const currentId = ref(route.query.id)

interface RuleForm {
  nickName: string
  department: string
  phonenumber: string
  email: string
  userName: string
  password: string
  sex: string
  status: string
  position: string
  remark: string
}
let ruleForm = ref<RuleForm>({
  nickName: '',
  department: '',
  phonenumber: '',
  email: '',
  userName: '',
  password: '',
  sex: '',
  status: '0',
  position: '',
  remark: '',
})
const isShow = ref(false)

const rules = reactive<FormRules<RuleForm>>({
  nickName: [{ required: true, message: "请输入昵称", trigger: "blur" }],
  department: [{ required: true, message: "请输入归属部门", trigger: "blur" }],
  phonenumber: [{ required: true, message: "请输入手机号", trigger: "blur" },
  { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }],
  email: [{ required: true, message: "请输入邮箱", trigger: "blur" },
  { type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] }],
  userName: [{ required: true, message: "请输入登录名称", trigger: "blur" }],
  password: [{ required: true, message: "请输入登录密码", trigger: "blur" },
  { min: 5, max: 16, message: "密码长度为5-16位", trigger: "blur" }],
  sex: [{ required: true, message: "请输入用户性别", trigger: "blur" }],
  position: [{ required: true, message: "请输入岗位", trigger: "blur" }],
})
// 表单
const resourceFormRef = ref<FormInstance>()
// 保存
const submitForm = () => {
  const formEl = resourceFormRef.value
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      if (currentId.value) {
        updateUser(ruleForm.value).then((res: any) => {
          ElMessage.success("保存成功")
          router.replace({ path: '/more/system/user/index' })
        })
      } else {
        addUser(ruleForm.value).then((res: any) => {
          ElMessage.success("保存成功")
          router.replace({ path: '/more/system/user/index' })
        })
      }
    } else {
    }
  })
}
// 编辑
const edit = () => {
  isShow.value = !isShow.value
}
// 返回
const back = () => {
  closeRoute()
  router.replace({ path: '/more/system/user' })
}
// 是否创建
const isCreate = ref(false)
const getInfo = () => {
  getUser(currentId.value as string).then((res: any) => {
    decryptJasypt(res.data.password).then(e => {
      res.data.password = e
      ruleForm.value = res.data
    })
  })
}
// 挂载
onMounted(() => {
  if (currentId.value) {
    isShow.value = true
    isCreate.value = false
    getInfo()
  } else {
    isShow.value = false
    isCreate.value = true
  }
})
interface Department {
  id: string
  name: string
}
const departmentList = ref<Department[]>([])
onActivated(() => {
  if (currentId.value && currentId.value !== route.query.id) {
    isShow.value = true
    isCreate.value = false
    currentId.value = route.query.id as string
    getInfo()
  }
})
</script>
<template>
  <div class="app-container pager-container">
    <div class="app-container-content">
      <div class="cpi-header">
        <span class="cpi-header-text">基本信息</span>
        <el-button @click="edit" class="edit" v-if="!isCreate">{{ !isShow ? '详情' : '编辑'
          }}</el-button>

      </div>
      <div class="cpi-content nobac">
        <el-form v-if="!isShow" ref="resourceFormRef" :model="ruleForm" :rules="rules" label-width="120px"
          label-position="top" class="fixed-width form-two-columns">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="登录名称" prop="userName">
                <el-input v-model="ruleForm.userName" autocomplete="new-password" placeholder="请输入登录名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="登录密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" show-password autocomplete="new-password"
                  maxlength="22" placeholder="请输入登录密码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="昵称" prop="nickName">
                <el-input v-model="ruleForm.nickName" placeholder="请输入昵称" />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
            <el-form-item label="归属部门">
              <el-select v-model="ruleForm.department" placeholder="请选择归属部门">
                <el-option :label="item.name" :value="item.id" v-for="item in departmentList" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
            <el-col :span="12">
              <el-form-item label="手机号" prop="phonenumber">
                <el-input v-model.number="ruleForm.phonenumber" placeholder="请输入手机号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email" placeholder="请输入邮箱" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="岗位">
                <el-input v-model="ruleForm.position" placeholder="请输入岗位" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="用户状态">
                <el-radio-group v-model="ruleForm.status">
                  <el-radio :label="0" value="0">正常</el-radio>
                  <el-radio :label="1" value="1">停用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div v-else class="cpi-content-detail">
          <el-form label-width="120px" class="fixed-width form-two-columns">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="用户名称:" prop="userName">
                  {{ ruleForm.userName }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="登录密码:" prop="password">
                  {{ '******' }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="昵称:" prop="nickName">
                  {{ ruleForm.nickName }}
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
            <el-form-item label="归属部门">
              <el-select v-model="ruleForm.department" placeholder="请选择归属部门">
                <el-option :label="item.name" :value="item.id" v-for="item in departmentList" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
              <el-col :span="12">
                <el-form-item label="手机号:" prop="phonenumber">
                  {{ ruleForm.phonenumber }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="邮箱:" prop="email">
                  {{ ruleForm.email }}
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="岗位:">
                  {{ ruleForm.position }}
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="用户状态:">
                  {{ ruleForm.status === '0' ? '正常' : '停用' }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
    <div class="cpi-header">
      <span class="cpi-header-text">其他信息</span>
    </div>
    <div class="cpi-content nobac footer-top">
      <div v-if="!isShow">
        <el-form :model="ruleForm" label-width="80px" label-position="top" class="fixed-width form-two-remark">
          <el-form-item label="备注">
            <el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入备注" />
          </el-form-item>
        </el-form>
      </div>
      <div v-else class="cpi-content-detail">
        <el-form label-width="80px" class="fixed-width form-two-remark">
          <el-form-item label="备注:">
            {{ ruleForm.remark }}
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="detall-footer">
      <el-button @click="submitForm" v-if="!isShow" class="edit keep">保存</el-button>
      <el-button @click="back" class="edit">退出</el-button>
    </div>
  </div>

</template>
<style lang="scss" scoped>
.cc-pane-item {
  flex: none !important;
  padding-bottom: 0px !important;
}

.cc-pane-item-footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.cc-pane-item .cpi-content {
  flex: none;
}

.cpi-content-detail {
  :deep(.el-col) {
    margin-bottom: 16px;
  }
}

:deep(.el-input__inner::-webkit-outer-spin-button),
:deep(.el-input__inner::-webkit-inner-spin-button) {
  -webkit-appearance: none;
  margin: 0;
}

:deep(.el-input__inner[type="number"]) {
  -moz-appearance: textfield;
}

.edit {
  background-color: #1d2d57;
}

.keep {
  background-color: rgb(0, 187, 153);
  color: #fff
}

.form-two-columns {
  width: 100%;

  :deep(.el-form-item__label) {
    width: 120px !important;
  }

  .el-form-item {
    width: 80%;
    margin-right: 0;
    margin-bottom: 30px;

    .el-input {
      width: 100%;
    }
  }
}

.form-two-remark {
  width: 100%;

  :deep(.el-form-item__label) {
    width: 120px !important;
  }

  .el-form-item {
    width: 90%;
    margin-right: 0;
    margin-bottom: 30px;

    .el-input {
      width: 100%;
    }
  }
}

.detall-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-top {
  height: calc(100vh - 400px);
}
</style>
